<template>
  <div>
    <van-nav-bar
      title="忘记交易密码"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field
        class="van-fieldlabel"
        v-model="phone"
        type="tel"
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="password"
        type="password"
        label="新密码"
        placeholder="请输入新密码"
      />
      <van-field
        v-model="xpassword"
        type="password"
        label="确认密码"
        placeholder="请再次输入新密码"
      />
    </van-cell-group>
    <van-button class="next" block @click="nextClick">下一步</van-button>
  </div>
</template>
<script>
import { getApiSms } from "network/ApiServe";
export default {
  data() {
    return {
      phone: "",
      password: "",
      xpassword: "",
    };
  },
  mounted() {
    (this.phone = ""), (this.password = ""), (this.xpassword = "");
  },
  methods: {
    onClickLeft() {
      this.$router.back(-1);
    },
    nextClick() {
      if (this.phone.length != 11) {
        this.$toast("请输入手机号码或者手机号码格式不正确");
        return;
      }
      if (this.password.length == 0) {
        this.$toast("请输入新密码");
        return;
      }
      if (this.xpassword.length == 0) {
        this.$toast("请再次输入新密码");
        return;
      }

      if (this.password != this.xpassword) {
        this.$toast("两次密码不一致");
        return;
      }

      getApiSms(this.phone)
        .then((res) => {
          if (res.resp_code != "000000") {
            this.$toast(res.resp_message);
            return;
          }
          this.$toast(res.resp_message);
          this.$router.push({
            name: "SMSVerification",
            params: {
              phone: this.phone,
              password: this.password,
              name: "修改交易",
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style  >
.van-field__label {
  text-align: right !important;
}
.van-cell::after {
  left: 0;
  right: 0;
}
.van-nav-bar .van-icon {
  color: #666;
}
</style>
<style scoped>
.van-nav-bar .van-icon {
  color: #666666;
}
.van-cell-group {
  margin-top: 46px;
}
.van-field__label {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  box-sizing: border-box;
  width: 6.2em;
  margin-right: 0.32rem;
  color: #646566;
  text-align: right !important;
  word-wrap: break-word;
}
.next {
  color: #fff;
  background-color: #f1ce8a;
  margin-top: 20px;
  margin-left: 20px;
  width: 335px;
}
</style>